<template>
  <div class="xcgl-popWin" style="boder-radius:10px" v-if="visible">
    <i class="tab-pane-header-btn el-icon-close" @click="closePop"></i>
    <el-tabs v-model="activeName" @tab-click="handleClick">

      <el-tab-pane label="属性信息" name="first">
        <ul
          class="ul-list"
          style="margin-top: 8px; margin-bottom: 2px; max-height:187px;overflow-y:auto;">
          <li v-for="(item,index) in fields" :key="index">
            <el-row>
              <el-col :span="4"><span class="fieldTitle">{{item.k}} :</span></el-col>
              <el-col :span="20">
                <el-input type="text" clearable v-model="item.v"></el-input>
              </el-col>
            </el-row>
          </li>
        </ul>
        <el-button type="button" class="el-button--primary" size="mini" style="width: 100%" @click="saveProperties">保存
        </el-button>
      </el-tab-pane>

      <el-tab-pane name="second">
        <span slot="label">
          <el-badge :value="images.length" class="item" type="primary">图片信息</el-badge>
        </span>
        <el-carousel arrow="always" :autoplay="false" height="200px" trigger="click">
          <el-carousel-item v-for="item in images" :key="item.index">
            <el-image style="width:291px; height:196px" :src="image_url + item"></el-image>
          </el-carousel-item>
        </el-carousel>
      </el-tab-pane>

      <el-tab-pane name="third">
        <span slot="label">
          <el-badge :value="videos.length" class="item" type="primary">视频信息</el-badge>
          <!-- <span>图片信息</span> -->
        </span>
        <el-carousel arrow="always" :autoplay="false" height="200px" trigger="click">
          <el-carousel-item v-for="(item,index) in videos" :key="index">
            <video style="width: 291px; height: 196px" controls>
              <source :src="video_url+item" type="video/mp4">
            </video>
          </el-carousel-item>
        </el-carousel>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>
<script>
  import {mapState} from 'vuex';
  import {add, remove, update} from '@/api/xcgl/ysbj'

  export default {
    name: 'index',
    data: function () {
      return {
        visible: undefined,
        activeName: "first",
        images: [],
        videos: [],
        fields: [],
        remote: [],
        image_url: "http://218.10.70.76:3002/images/",
        video_url: "http://218.10.70.76:3002/video/",
        feature: undefined
      };
    },
    methods: {
      /**
       * 关闭Pop
       */
      closePop() {
        this.visible = undefined
      },


      handleClick(tab, event) {

      },
      /**
       * 设置数据
       */
      setData(feature) {
      
      },
      /**
       * 保存数据
       */
      saveProperties() {}
      
    },
    computed: {
      ...mapState({
        attributes(state) {
          return state.xcgl.selectTask
            ? state.xcgl.selectTask.attribute
            : {};
        },
        /**
         * 要素
         * @param state
         * @returns {featureCollection|(function(*))|Array|*}
         */
        featureCollection(state) {
          return state.xcgl.featureCollection;
        },
        /**
         * 服务类
         * @param state
         * @returns {mapService|(function(*))|*}
         */
        mapService(state) {
          return state.xcgl.mapService;
        }
      })
    }

  };
</script>
<style scoped>
  .xcgl-popWin {
    position: absolute;
    right: 100px;
    top: 20px;
    width: 310px;
    background-color: white;
    height: 280px;
    border-radius: 0px;
    padding-left: 12px;
    padding-right: 10px;
    padding-top: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }

  .el-badge__content.is-fixed {
    top: 10px;
  }

  .ul-list li {
    list-style: none;
    margin: 0;
    margin-left: 10px;
    margin-bottom: 4px;
    padding: 0;
    height: 22px;
    line-height: 22px;
    float: left;
    width: calc(100% - 10px);
    height: auto;
  }

  .ul-list li .fieldTitle {
    font-weight: bold;
    color: #1957a9;
  }

  .ul-list {
    width: 100%;
    float: left;
    padding: 0px;
    font-size: 12px;
    font-family: "Helvetica Neue";
  }
</style>

